<template>
  <div class="meteorological">
    <TitleColumn name="气象降雨预报" />
    <div class="content">
      <MonitorTable />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';
  import MonitorTable from './MonitorTable/index.vue';

  defineOptions({ name: 'Meteorological' });

  const state = reactive({
    name: 'vue3',
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .meteorological {
    width: 100%;
    .content {
      width: 100%;
      height: 100%;
      padding: 10px 14px 10px 0;
      overflow: hidden;
      position: relative;
      background: #02123433;
      backdrop-filter: blur(10px);
    }
  }
</style>
